<script setup>
import {black2} from '@/common/css/public/base.module.scss'
import menuList from '@/common/data/menu-list'
import {useRoute} from 'vue-router'

//获取路由信息
const route = useRoute()
</script>

<template>
  <el-menu class="el-menu-vertical-demo" router :default-active="route.fullPath" :text-color="black2">
    <template v-for="{id, name,icon,path} in menuList" :key="id">
      <!-- menu选项 -->
      <el-menu-item :index="path">
        <el-icon>
          <component :is="icon"></component>
        </el-icon>
        <span>{{ name }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<style lang="scss" scoped>
.el-menu {
  height: 100%;
  padding-top: $spacing-3;
  @include flex-box(false, true);
  gap: $spacing-3;
  align-items: center;
  border-color: $divider;

  .el-menu-item {
    width: 80%;
    padding: $spacing-3 auto;
  }

  .is-active {
    background: $black;
    color: $white;
  }
}
</style>
